<template>
  <div>
    <el-main>
      <h1 class="FilingInformation">备案信息修改</h1>
      <div class="BodyRim">
        <p></p>
        <p></p>
        <b class="ICPB">ICP备案:</b>
        <p></p>
        <input type="text" class="ICPInput" v-model="form.name" readonly />
        <p></p>
        <b class="PublicB">公安备案:</b>
        <p></p>
        <input type="text" class="PublicInput" v-model="form.public" readonly />
        <el-button
          type="primary"
          icon="el-icon-edit"
          size="mini"
          style="margin-left:20px"
          @click="dialogFormVisible = true"
        ></el-button>
        <!-- 修改模态框 -->
        <el-dialog title="提示" :visible.sync="dialogFormVisible">
          <el-form :model="form">
            <el-form-item label="ICP备案 : " :label-width="formLabelWidth">
              <el-input
                v-model="form.name"
                autocomplete="off"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="公安备案 : " :label-width="formLabelWidth">
              <el-input
                v-model="form.public"
                autocomplete="off"
                clearable
              ></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="putontecordsOK">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </el-main>
  </div>
</template>

<script>
// import { putAdd, selectPut } from '../../api/users'

export default {
  data() {
    return {
      dialogFormVisible: false,
      form: {
        public: "",
        name: "",
        type: [],
      },
      formLabelWidth: "120px",
    };
  },
  mounted() {
    selectPut()
      .then((data) => {
        console.log(data.data);
        this.form.name = data.data.icpPutOnRecords;
        this.form.public = data.data.publicPutOnRecords;
      })
      .catch((err) => {
        console.log(err);
      });
  },
  methods: {
    putontecordsOK() {
      var Icp = this.form.name;
      var Public = this.form.public;

      // console.log(Icp);
      // console.log(Public);

      putAdd(Icp, Public)
        .then((data) => {
          console.log(data);
          this.dialogFormVisible = false;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style scoped>
.FilingInformation {
  font-size: 30px;
  margin-left: 45%;
}
.BodyRim {
  border-style: solid;
  width: 400px;
  height: 200px;
  border-width: 1px;
  margin-left: 38%;
}
.ICPB {
  margin-left: 45%;
}
.ICPInput {
  margin-left: 100px;
  width: 200px;
}
.ICPButton {
  margin-left: 334px;
  width: 60px;
  margin-top: -20px;
}
.BodyRim2 {
  border-style: solid;
  width: 400px;
  height: 100px;
  border-width: 1px;
  margin-left: 30%;
  margin-top: 20px;
}
.PublicB {
  margin-left: 45%;
}
.PublicInput {
  margin-left: 100px;
  width: 200px;
}
.PublicButton {
  margin-left: 334px;
  width: 10px;
}
</style>
